<script setup lang="ts">
// vue
import { ref } from 'vue'
import { onReady } from '@dcloudio/uni-app'
// import { useGuessList } from '../../composables/index'
import { OrderState, orderStateList } from '../../services/constants'
import type { OrderResult } from '../../types/order'
import { onLoad } from '@dcloudio/uni-app'
import {
  orderDetailAPI,
  getMemberOrderConsignmentByIdAPI,
  orderPayMockAPI,
  getPayWxMiniPayAPI,
  orderDeleteAPI,
  orderCancelAPI,
  orderReceiptAPI,
} from '../../services/order'
import { shopGetBusinessTimeAPI } from '@/services/shop'
// icon
import locationIcon from '@/static/icon/order/location.svg'
// import DetailSkeleton from './components/DetailSkeleton.vue'
import { ReceiveType } from '../../services/constants'
import { getQrcodeByOrderId } from '@/services/image'
import iconContainer from '@/components/container/icon-container.vue'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 猜你喜欢
// const { guessRef, onScrolltolower } = useGuessList()
// 弹出层组件
const popup = ref<UniHelper.UniPopupInstance>()
// 取消原因列表
const reasonList = ref([
  '不想要了',
  '商品信息填错了',
  '地址信息填写错误',
  '其它',
])
// 订单取消原因
const reason = ref('')
// 复制内容
const onCopy = (id: string) => {
  // 设置系统剪贴板的内容
  uni.setClipboardData({ data: id })
}
// 获取页面参数
const query = defineProps<{
  id: string
}>()

// 获取页面栈
const pages = getCurrentPages()
// 订单详情页面, 数组最后一项为当前页面
const pageInstance = pages.at(-1) as any
// 页面渲染完成后, 绑定动画效果
// onReady 相当于 onMounted
onReady(() => {
  // 动画效果,导航栏背景色
  pageInstance.animate(
    '.navbar', // 选择器
    [{ backgroundColor: 'transparent' }, { backgroundColor: '#f8f8f8' }], // 关键帧信息
    1000, // 动画持续时长
    {
      scrollSource: '#scroller', // scroll-view 的选择器
      startScrollOffset: 0, // 开始滚动偏移量
      endScrollOffset: 50, // 停止滚动偏移量
      timeRange: 1000, // 时间长度
    },
  )
  // 动画效果,导航栏标题
  pageInstance.animate(
    '.navbar .title',
    [{ color: 'transparent' }, { color: '#000' }],
    1000,
    {
      scrollSource: '#scroller',
      timeRange: 1000,
      startScrollOffset: 0,
      endScrollOffset: 50,
    },
  )
  // 动画效果,导航栏返回按钮
  pageInstance.animate(
    '.navbar .back',
    [{ color: '#fff' }, { color: '#000' }],
    1000,
    {
      scrollSource: '#scroller',
      timeRange: 1000,
      startScrollOffset: 0,
      endScrollOffset: 50,
    },
  )
})

/**
 * 判断是否在营业时间内
 */
const isBusinessTime = ref(false)
const checkBusinessTime = async () => {
  // 获取营业时间
  const res = await shopGetBusinessTimeAPI()
  // 判断当前时间是否在营业时间内
  const now = new Date()
  const [startTime, endTime] = res.result.timeRange // 解构获取开始和结束时间

  // 解析开始时间
  const [startHours, startMinutes, startSeconds] = startTime
    .split(':')
    .map(Number)
  // 解析结束时间
  const [endHours, endMinutes, endSeconds] = endTime.split(':').map(Number)

  // 创建今天的开始和结束时间对象
  const start = new Date()
  start.setHours(startHours, startMinutes, startSeconds, 0)

  const end = new Date()
  end.setHours(endHours, endMinutes, endSeconds, 0)

  // 判断当前时间是否在营业时间范围内
  if (now >= start && now <= end) {
    isBusinessTime.value = true
    return
  }
}

const clickGoods = () => {
  if (!isBusinessTime.value) {
    // 提示, 2秒后关闭
    uni.showToast({
      icon: 'none',
      title: '当前不在营业时间内，请选择其他时间再试',
      duration: 2000,
    })
  }
}

/**
 * 获取订单详情
 */
const order = ref<OrderResult>()
// 取餐的二维码
const qrcode = ref<string>()
const getMemberOrderByIdData = async () => {
  const res = await orderDetailAPI(query.id)
  order.value = res.result
  // 判断是否为自提订单
  if (
    (order.value.receiveType === ReceiveType.PICKUP &&
      order.value.orderState === OrderState.DaQuCanCan) ||
    (order.value.receiveType === ReceiveType.PICKUP &&
      order.value.orderState === OrderState.YiWanCheng)
  ) {
    // 获取生成的二维码
    const res = await getQrcodeByOrderId(query.id)
    qrcode.value = res.result.file
  }
}

// 在页面加载完成后, 获取订单详情
onLoad(() => {
  checkBusinessTime()
  getMemberOrderByIdData()
})

// 倒计时结束状态修改为再次购买
const onTimeup = () => {
  // 修改订单状态为已取消
  order.value!.orderState = OrderState.YiQuXiao
}

// 订单支付
const onOrderPay = async () => {
  // 生产环境
  const res = await getPayWxMiniPayAPI({ orderId: query.id })
  // 发起微信支付
  await wx.requestPayment(res.result)
  // 支付成功, 跳转到支付成功页面
  uni.redirectTo({
    url: `/pagesOrder/payment/payment?id=${query.id}`,
  })

  // // 判断环境是否为开发环境
  // if (import.meta.env.DEV) {
  //   // 开发环境, 模拟支付
  //   await orderPayMockAPI({ orderId: query.id })
  // } else {
  //   // 生产环境
  //   const res = await getPayWxMiniPayAPI({ orderId: query.id })
  //   // 发起微信支付
  //   await wx.requestPayment(res.result)
  // }
  // // 支付成功, 跳转到支付成功页面
  // uni.redirectTo({
  //   url: `/pagesOrder/payment/payment?id=${query.id}`,
  // })
}

// 开发环境标识
const isDev = import.meta.env.DEV
// 模拟发货
const onOrderSend = async () => {
  // 打包到生产环境会删除开发环境标识的代码(tree shaking)树摇优化
  if (isDev) {
    // 调用模拟接口
    await getMemberOrderConsignmentByIdAPI(query.id)
    // 提示模拟发货成功
    uni.showToast({
      title: '模拟发货成功',
      icon: 'success',
    })
    // 修改订单状态为已发货
    order.value!.orderState = OrderState.DaiShouHuo
  }
}

// 确认收货
const onOrederConfirm = async () => {
  // 二次弹窗确认
  uni.showModal({
    content: '为保障您的权益，请收到货并确认无误后再确认收货。',
    success: async (success) => {
      if (success.confirm) {
        // 调用接口
        const res = await orderReceiptAPI(query.id)
        // 确认收货成功
        uni.showToast({
          title: '确认收货成功',
          icon: 'success',
        })
        order.value = res.result
      }
    },
  })
}

const onCancelDaiQuCanCan = () => {
  // // 获取当前时间和自提时间
  // const now = new Date()
  // const pickUpTime = new Date(order.value!.pickUpData!.pickUpTime)

  // // 计算时间差（单位：毫秒）
  // const diff = pickUpTime.getTime() - now.getTime()

  // // 判断是否小于10分钟
  // if (diff < 600000) {
  //   // 10分钟 = 10 * 60 * 1000 毫秒
  //   uni.showToast({
  //     title: '自提时间前10分钟以后不能取消订单',
  //     icon: 'none',
  //   })
  // } else {
  //   // 打开popup
  //   popup.value?.open?.()
  // }

  popup.value?.open?.()
}

// 删除订单
const onOrderDelete = async () => {
  // 二次弹窗确认
  uni.showModal({
    content: '确定要删除该订单吗？',
    success: async (success) => {
      if (success.confirm) {
        await orderDeleteAPI(query.id)
        // 关闭当前页面, 跳转到订单列表页
        uni.redirectTo({
          url: '/pagesOrder/list/list',
        })
      }
    },
  })
}

// 取消订单
const onOrderCancel = async () => {
  if (reason.value === '') {
    uni.showToast({
      title: '请选择取消原因',
      icon: 'none',
    })
    return
  } else {
    await orderCancelAPI(query.id, { cancelReason: reason.value })
    // 提示
    uni.showToast({
      title: '取消成功',
    })

    // 跳转到首页, 跳转会把其他页面的缓存清除, 需要等待一会儿
    setTimeout(() => {
      // uni.switchTab({ url: '/pages/my/my' })
      // 返回上一页
      uni.navigateBack()
      // 关闭弹窗
      popup.value!.close!()
    }, 500)
  }
}
</script>

<template>
  <!-- 自定义导航栏: 默认透明不可见, scroll-view 滚动到 50 时展示 -->
  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <view class="wrap">
      <navigator
        v-if="pages.length > 1"
        open-type="navigateBack"
        class="back cuIcon-back"
      ></navigator>
      <navigator
        v-else
        url="/pages/index/index"
        open-type="switchTab"
        class="back cuIcon-back"
      >
      </navigator>
      <view class="title">订单详情</view>
    </view>
  </view>
  <!--     @scrolltolower="onScrolltolower" -->
  <scroll-view scroll-y enable-back-to-top class="viewport" id="scroller">
    <template v-if="order">
      <!-- 订单状态 -->
      <view
        class="overview"
        :style="{ paddingTop: safeAreaInsets!.top + 20 + 'px' }"
      >
        <!-- 待付款状态:展示去支付按钮和倒计时 -->
        <template v-if="order.orderState === OrderState.DaiFuKuan">
          <view class="status icon-clock">等待付款</view>
          <view class="tips">
            <text class="money">应付金额: ¥ {{ order.payMoney }}</text>
            <text class="time">支付剩余</text>
            <!-- 倒计时组件, 测试再次购买可以把倒计时时间改短 -->
            <uni-countdown
              :second="order.countdown"
              color="#515151"
              splitor-color="#515151"
              :show-day="false"
              :show-colon="false"
              @timeup="onTimeup"
            />
          </view>
          <!-- <view class="button" @click="onOrderPay">去支付</view> -->
        </template>
        <!-- 其他订单状态:展示再次购买按钮 -->
        <template v-else>
          <view class="status">
            {{ orderStateList[order.orderState].text }}
          </view>
          <!-- <view class="button-group">
            <navigator
              class="button"
              :url="`/pagesOrder/create/create?orderId=${query.id}`"
              hover-class="none"
            >
              再次购买
            </navigator>
            <view
              v-if="isDev && order.orderState === OrderState.DaiFaHuo"
              class="button"
              @click="onOrderSend"
            >
              模拟发货
            </view>
            <view
              v-if="order.orderState === OrderState.DaiShouHuo"
              class="button"
              @click="onOrederConfirm"
            >
              确认发货
            </view>
          </view> -->
        </template>

        <view
          class="status-bar"
          hover-class="none"
          hover-stop-propagation="false"
          v-if="
            order.pickUpData &&
            (order.orderState === OrderState.DaQuCanCan ||
              order.orderState === OrderState.YiWanCheng)
          "
        >
          <!-- 取餐码 -->
          <view class="pickup-code">
            <view class="text">蛋糕待自取 取餐码：</view>
            <view class="symbol primary">{{
              order.pickUpData?.pickUpCode
            }}</view>
          </view>
          <view class="tip">
            <view class="text">请及时到店取蛋糕， </view>
            <view class="symbol primary">祝你用餐愉快</view>
          </view>
        </view>
      </view>

      <view
        class="isInShop-Container"
        v-if="order.receiveType === ReceiveType.PICKUP"
      >
        <view
          class="item"
          :class="order.pickUpData?.isInShop === 1 ? 'isSelect' : ''"
        >
          <span class="title">堂食</span>
          <span class="desc">店内食用</span>
        </view>
        <view
          class="item"
          :class="order.pickUpData?.isInShop === 0 ? 'isSelect' : ''"
        >
          <span class="title">打包</span>
          <span class="desc">打包带走</span>
        </view>
      </view>

      <!-- 自提时间 -->
      <view
        class="pickup-time"
        v-if="
          order.receiveType === ReceiveType.PICKUP &&
          !order.pickUpData?.isInShop
        "
      >
        <view class="text">自提时间: </view>
        <view class="symbol primary"> {{ order.pickUpData?.pickUpTime }}</view>
      </view>

      <!-- 取餐二维码 -->
      <uni-collapse
        class="qrcode-collapse"
        v-if="
          order.pickUpData && order.receiveType === ReceiveType.PICKUP && qrcode
        "
      >
        <uni-collapse-item
          title="取餐二维码"
          :show-animation="true"
          :open="true"
        >
          <view
            class="content"
            hover-class="none"
            hover-stop-propagation="false"
          >
            <image class="qrcode" :src="qrcode" mode="aspectFill"> </image>
          </view>
        </uni-collapse-item>
      </uni-collapse>

      <!-- 配送状态 -->
      <view class="shipment">
        <view class="location-icon">
          <iconContainer :icon="locationIcon" size="80rpx"></iconContainer>
        </view>
        <view class="receiveTip">
          {{ order.deliveryData ? '外卖配送' : '到店自取' }}
        </view>
        <!-- 配送信息 -->
        <view class="locate" v-if="order.deliveryData">
          <view class="user"
            >{{ order.deliveryData!.receiverContact }}
            {{ order.deliveryData!.receiverMobile }}
          </view>
          <view class="address">
            {{ order.deliveryData!.receiverAddress }}
          </view>
        </view>

        <!-- 自提信息 -->
        <view class="locate" v-if="order.receiveType === ReceiveType.PICKUP">
          <view class="user">
            店铺: {{ order.pickUpData?.pickUpShopName }}
          </view>
          <view class="address">
            {{ order.pickUpData?.pickUpShopAddress }}
          </view>
        </view>
      </view>

      <!-- 商品信息 -->
      <view class="goods" @click="clickGoods">
        <view class="item">
          <navigator
            class="navigator"
            v-for="item in order.skus"
            :key="item.id"
            :url="isBusinessTime ? `/pages/goods/goods?id=${item.spuId}` : ''"
            hover-class="none"
          >
            <image class="cover" :src="item.image"></image>
            <view class="meta">
              <view class="name ellipsis">{{ item.name }}</view>
              <view class="type">{{ item.attrsText }}</view>
              <view class="price">
                <view class="actual">
                  <text class="symbol">¥</text>
                  <text>{{ item.curPrice }}</text>
                </view>
              </view>
              <view class="quantity">x{{ item.quantity }}</view>
            </view>
          </navigator>
          <!-- 待评价状态:展示按钮 -->
          <view
            class="action"
            v-if="order.orderState === OrderState.DaiPingJia"
          >
            <view class="button primary">申请售后</view>
            <navigator url="" class="button"> 去评价 </navigator>
          </view>
        </view>
        <!-- 合计 -->
        <view class="total">
          <view class="row">
            <view class="text">商品总价: </view>
            <view class="symbol">{{ order.totalMoney }}</view>
          </view>
          <view class="row" v-if="order.deliveryData">
            <view class="text">运费: </view>
            <view class="symbol">{{ order.deliveryData!.postFee }}</view>
          </view>
          <view class="row">
            <view class="text">应付金额: </view>
            <view class="symbol primary">{{ order.payMoney }}</view>
          </view>
        </view>
      </view>

      <!-- 用户备注 -->
      <view class="remark">
        <view class="text">用户备注</view>
        <view class="symbol primary">{{ order.remark }}</view>
      </view>

      <!-- 订单信息 -->
      <view class="detail">
        <view class="title">订单信息</view>
        <view class="row">
          <view class="item">
            订单编号: {{ query.id }}
            <text class="copy" @tap="onCopy(query.id)">复制</text>
          </view>
          <view class="item">下单时间: {{ order.createTime }}</view>
        </view>
      </view>

      <!-- 猜你喜欢 -->
      <!-- <XtxGuess ref="guessRef" /> -->

      <!-- 底部操作栏 -->
      <view
        class="toolbar-height"
        :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"
      ></view>
      <view
        class="toolbar"
        :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"
      >
        <!-- 待付款 -->
        <template v-if="order.orderState === OrderState.DaiFuKuan">
          <view class="button primary" @click="onOrderPay"> 去支付 </view>
          <view class="button" @tap="popup?.open?.()"> 取消订单 </view>
        </template>

        <!-- 待发货 -->
        <template v-else-if="order.orderState === OrderState.DaiFaHuo">
          <view class="button" @tap="popup?.open?.()"> 取消订单 </view>
        </template>

        <!-- 待收货 -->
        <template v-else-if="order.orderState === OrderState.DaiShouHuo">
          <view class="button primary" @click="onOrederConfirm">确认收货</view>
        </template>

        <!-- 待取餐状态 -->
        <template v-else-if="order.orderState === OrderState.DaQuCanCan">
          <view class="button" @tap="onCancelDaiQuCanCan"> 取消订单 </view>
        </template>

        <!-- 已完成 -->
        <template v-else>
          <!-- <navigator
            class="button secondary"
            :url="`/pagesOrder/create/create?orderId=${query.id}`"
            hover-class="none"
          >
            再来一单
          </navigator> -->
          <!-- 删除订单 -->
          <view
            class="button delete"
            v-if="
              order.orderState >= OrderState.DaiPingJia &&
              order.orderState < OrderState.DaQuCanCan
            "
            @click="onOrderDelete"
          >
            删除订单
          </view>
        </template>
      </view>
    </template>
    <template v-else>
      <!-- 骨架屏组件 -->
      <DetailSkeleton />
    </template>

    <!-- 底部占位空盒子 -->
    <view class="toolbar-height"></view>
  </scroll-view>
  <!-- 取消订单弹窗 -->
  <uni-popup ref="popup" type="bottom" background-color="#fff">
    <view class="popup-root">
      <view class="title">订单取消</view>
      <view class="description">
        <view class="tips">请选择取消订单的原因：</view>
        <view
          class="item-cell"
          v-for="item in reasonList"
          :key="item"
          @tap="reason = item"
        >
          <text class="text">{{ item }}</text>
          <text
            v-if="item === reason"
            class="item-icon cuIcon-roundcheck"
            :class="{ checked: item === reason }"
            :style="{ color: '#27ba9b' }"
          ></text>
          <text v-else class="item-icon cuIcon-round"></text>
        </view>
      </view>
      <view class="footer">
        <view class="button" @tap="popup?.close?.()">取消</view>
        <view class="button primary" @click="onOrderCancel">确认</view>
      </view>
    </view>
  </uni-popup>
</template>

<style lang="scss">
page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* 是否堂食 */
.isInShop-Container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 26rpx;
  border-radius: 10rpx;
  background: #fff;
  margin: 20rpx;
  padding: 10rpx 0;
  color: #333;

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 20rpx;
    width: 48%;
    margin: 0 auto;

    &.isSelect {
      border: #6fd4f6 solid 5rpx;
      position: relative; /* 确保伪元素定位的参考 */
      border-radius: 20rpx;

      &::after {
        content: '';
        position: absolute;
        top: -5rpx; /* 调整三角形的位置 */
        right: -5rpx; /* 调整三角形的位置 */
        width: 0;
        height: 0;
        border-width: 40rpx;
        border-style: solid;
        border-color: #6fd4f6 #6fd4f6 transparent transparent; /* 设置边框颜色来形成三角形 */
        border-radius: 10rpx;
      }
    }

    .title {
      font-size: 35rpx;
      color: #333;
    }
    .desc {
      font-size: 26rpx;
      color: #666;
    }
  }
}

.navbar {
  width: 750rpx;
  color: #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  /* background-color: #f8f8f8; */
  background-color: transparent;

  .wrap {
    position: relative;

    .title {
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      /* color: #000; */
      color: transparent;
    }

    .back {
      position: absolute;
      left: 0;
      height: 44px;
      width: 44px;
      font-size: 44rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      /* color: #000; */
      color: #fff;
    }
  }
}

.viewport {
  background-color: #f7f7f8;

  /** 状态栏高度 */
  .status-bar {
    width: 100%;
    color: #515151;

    /** 取餐码 */
    .pickup-code {
      display: flex;
      align-items: center;
      // 左外边距
      margin-left: 50rpx;
      // 上下外边距
      margin-top: 30rpx;
      margin-bottom: 30rpx;

      .text {
        font-size: 35rpx;
      }

      .symbol {
        font-size: 35rpx;
      }
    }

    /** 取餐提示 */
    .tip {
      display: flex;
      align-items: center;
      // 左外边距
      margin-left: 50rpx;
      // 上下外边距
      margin-top: 30rpx;
      margin-bottom: 30rpx;

      .text {
        font-size: 25rpx;
      }

      .symbol {
        font-size: 25rpx;
      }
    }
  }
}

.overview {
  display: flex;
  flex-direction: column;
  align-items: center;

  line-height: 1;
  padding-bottom: 30rpx;
  color: #515151;
  font-weight: 540;
  background-size: cover;
  background: linear-gradient(
    45deg,
    rgba(163, 213, 214, 1) 20%,
    rgba(196, 210, 210, 1) 80%
  );

  .status {
    font-size: 36rpx;
  }

  .status::before {
    margin-right: 6rpx;
    font-weight: 500;
  }

  .tips {
    margin: 30rpx 0;
    display: flex;
    font-size: 14px;
    align-items: center;

    .money {
      margin-right: 30rpx;
    }
  }

  .button-group {
    margin-top: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .button {
    width: 260rpx;
    height: 64rpx;
    margin: 0 10rpx;
    text-align: center;
    line-height: 64rpx;
    font-size: 28rpx;
    color: #6fd4f6;
    border-radius: 68rpx;
    background-color: #fff;
  }
}

/** 自提时间 */
.pickup-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  margin: 20rpx 20rpx 0;
  border-radius: 10rpx;
  background-color: #fff;
  color: #666;

  .text {
    font-size: 30rpx;
  }

  .symbol {
    font-size: 30rpx;
  }
}

/** 取餐二维码 */
.qrcode-collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20rpx 20rpx 0;
  border-radius: 10rpx;
  background-color: #fff;
  color: #666;

  .content {
    // 内容居中
    display: flex;
    align-items: center;
    justify-content: center;

    .qrcode {
      height: 300rpx;
      width: 300rpx;
    }
  }
}

/** 配送状态 */
.shipment {
  line-height: 1.4;
  padding: 0 20rpx;
  margin: 20rpx 20rpx 0;
  border-radius: 10rpx;
  background-color: #fff;
  display: flex;
  align-items: center;

  .location-icon {
    position: absolute;
    left: 23rpx;
  }

  .receiveTip {
    position: absolute;
    right: 28rpx;
    font-size: 35rpx;
    color: #333;
    padding: 10rpx 20rpx;
    // border: #6fd4f6 solid 5rpx;
    border-radius: 20rpx;
    background-color: rgb(241, 220, 136, 0.8);
    // 文字居中
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .locate,
  .item {
    min-height: 120rpx;
    padding: 30rpx 30rpx 25rpx 75rpx;
    background-size: 50rpx;
    background-repeat: no-repeat;
    background-position: 6rpx center;
  }

  .locate {
    .user {
      font-size: 26rpx;
      color: #444;
    }

    .address {
      font-size: 24rpx;
      color: #666;
    }
  }

  .item {
    background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/car.png);
    border-bottom: 1rpx solid #eee;
    position: relative;

    .message {
      font-size: 26rpx;
      color: #444;
    }

    .date {
      font-size: 24rpx;
      color: #666;
    }
  }
}

/** 商品信息 */
.goods {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .item {
    padding: 30rpx 0;
    border-bottom: 1rpx solid #eee;

    .navigator {
      display: flex;
      margin: 20rpx 0;
    }

    .cover {
      width: 170rpx;
      height: 170rpx;
      border-radius: 10rpx;
      margin-right: 20rpx;
    }

    .meta {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
    }

    .name {
      height: 80rpx;
      font-size: 26rpx;
      color: #444;
    }

    .type {
      line-height: 1.8;
      padding: 0 15rpx;
      margin-top: 6rpx;
      font-size: 24rpx;
      align-self: flex-start;
      border-radius: 4rpx;
      color: #888;
      background-color: #f7f7f8;
    }

    .price {
      display: flex;
      margin-top: 6rpx;
      font-size: 24rpx;
    }

    .symbol {
      font-size: 20rpx;
    }

    .original {
      color: #999;
      text-decoration: line-through;
    }

    .actual {
      margin-left: 10rpx;
      color: #444;
    }

    .text {
      font-size: 22rpx;
    }

    .quantity {
      position: absolute;
      bottom: 0;
      right: 0;
      font-size: 24rpx;
      color: #444;
    }

    .action {
      display: flex;
      flex-direction: row-reverse;
      justify-content: flex-start;
      padding: 30rpx 0 0;

      .button {
        width: 200rpx;
        height: 60rpx;
        text-align: center;
        justify-content: center;
        line-height: 60rpx;
        margin-left: 20rpx;
        border-radius: 60rpx;
        border: 1rpx solid #ccc;
        font-size: 26rpx;
        color: #444;
      }

      .primary {
        color: #fff;
        background-color: #6fd4f6;
      }
    }
  }

  .total {
    line-height: 1;
    font-size: 26rpx;
    padding: 20rpx 0;
    color: #666;

    .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10rpx 0;
    }

    .symbol::before {
      content: '¥';
      font-size: 80%;
      margin-right: 3rpx;
    }

    .primary {
      color: #cf4444;
      font-size: 36rpx;
    }
  }
}

.remark {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  margin: 20rpx 20rpx 0;
  border-radius: 10rpx;
  background-color: #fff;
  color: #666;

  .text {
    font-size: 30rpx;
  }

  .symbol {
    font-size: 30rpx;
  }
}

/** 订单信息 */
.detail {
  line-height: 1;
  padding: 30rpx 20rpx 0;
  margin: 20rpx 20rpx 0;
  font-size: 26rpx;
  color: #666;
  border-radius: 10rpx;
  background-color: #fff;

  .title {
    font-size: 30rpx;
    color: #444;
  }

  .row {
    padding: 20rpx 0;

    .item {
      padding: 10rpx 0;
      display: flex;
      align-items: center;
    }

    .copy {
      border-radius: 20rpx;
      font-size: 20rpx;
      border: 1px solid #ccc;
      padding: 5rpx 10rpx;
      margin-left: 10rpx;
    }
  }
}

.toolbar-height {
  height: 200rpx;
  box-sizing: content-box;
}

.toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--window-bottom));
  z-index: 1;

  height: 100rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  border-top: 1rpx solid #ededed;
  border-bottom: 1rpx solid #ededed;
  background-color: #fff;
  box-sizing: content-box;

  .button {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 200rpx;
    height: 72rpx;
    margin-left: 15rpx;
    font-size: 26rpx;
    border-radius: 72rpx;
    border: 1rpx solid #ccc;
    color: #444;
  }

  .delete {
    order: 4;
  }

  .button {
    order: 3;
  }

  .secondary {
    order: 2;
    color: #f1d45f;
    border: 1rpx solid #f9e17e;
  }

  .primary {
    order: 1;
    color: #fff;
    background-color: #6fd4f6;
  }
}

.popup-root {
  padding: 30rpx 30rpx 0;
  border-radius: 10rpx 10rpx 0 0;
  overflow: hidden;

  .title {
    font-size: 30rpx;
    text-align: center;
    margin-bottom: 30rpx;
  }

  .description {
    font-size: 28rpx;
    padding: 0 20rpx;

    .tips {
      color: #444;
      margin-bottom: 12rpx;
    }

    .item-cell {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15rpx 0;
      color: #666;
    }

    .item-icon {
      font-size: 38rpx;
    }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    padding: 30rpx 0 40rpx;
    font-size: 28rpx;
    color: #444;

    .button {
      flex: 1;
      height: 72rpx;
      text-align: center;
      line-height: 72rpx;
      margin: 0 20rpx;
      color: #444;
      border-radius: 72rpx;
      border: 1rpx solid #ccc;
    }

    .primary {
      color: #444;
      background-color: #f9e17e;
      border: none;
    }
  }
}
</style>
